<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">神码医院管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    <span id="username-placeholder">管理员</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="adminInfo.html">个人信息</a></dd>
                    <dd><a href="javascript:exit();">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" >病人管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="patient.html">病人列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" >病人医药费管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="medicalfree.html">病人医药费列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="">员工管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="staff.html">员工列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="">部门管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="department.html">部门列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="">药品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="drug.html">药品列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="">仪器管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="instrument.html">仪器列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="">管理员管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="admin.html">管理员列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <!-- 内容主体区域  面包屑-->
            <span class="layui-breadcrumb">
              <a>首页</a>
              <a><cite>个人信息</cite></a>
            </span>
            <!-- 水平线 -->
            <hr class="layui-bg-blue">

            <!-- 个人信息展示部分 -->
            <div class="layui-bg-gray">
                <div class="layui-row layui-col-space15" style="margin:auto">
                    <div style="text-align:center;">
                        <h1 style="color:#16b777; font-family:微软雅圆,serif">
                            <span id="uname-placeholder">管理员</span>
                            ，欢迎来到神码医院后台管理系统！
                        </h1>
                        <span class="layui-badge-dot layui-bg-orange"></span>
                        <span class="layui-badge-dot layui-bg-green"></span>
                        <span class="layui-badge-dot layui-bg-red"></span>
                        <span class="layui-badge-dot layui-bg-blue"></span>
                        <span class="layui-badge-dot layui-bg-black"></span>
                        <span class="layui-badge-dot layui-bg-gray"></span>
                    </div>
                    <div class="layui-col-md8" style="margin:auto">
                        <div class="layui-card">
                            <div class="layui-card-header">管理员信息面板</div>
                            <div class="layui-card-body">
                                用户名：<span id="name-placeholder"></span>
                                <br><br>
                                姓名：<span id="rname-placeholder"></span>
                                <br><br>
                                级别：<span id="role-placeholder"></span>
                                <br><br>
                                角色：管理员
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <br><br>
        </div>
    </div>
    <div class="layui-footer" style="text-align: center">
        <!-- 底部固定区域 -->
        DEVELOP BY AMAZINGCODE
    </div>
</div>

<script src="./layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function(othis){ // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function(){  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '特别鸣谢',
                    content: '<div style="padding: 15px;">感谢东哥的指导</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
<script src="/jquery/jquery-3.6.0.js"></script>

<script>
    // 登录用户获取和用户退出
    let username = localStorage.getItem("USERNAME");
    let userid = localStorage.getItem("USERID");
    // 检查是否获取到用户名
    if (username) {
        // 替换占位符内容
        document.getElementById("username-placeholder").textContent = username;
        document.getElementById("uname-placeholder").textContent = username;
    } else {
        // 如果未设置 USERNAME，直接返回到登录页面
        alert("你的登录信息已失效，请重新登录！");
        window.location.href = "/login/login.html";
    }
    function exit(){
        localStorage.clear();
        window.location.href = "/login/login.html";
    }

    // 管理员个人信息请求
    $.ajax({
        url:"/user/selectById",       // 请求路径
        type:"post",                  // 请求的方式，不区分大小写
        cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
        data: {
            id:userid
        },
        datatype:"json",        // 返回类型，text文本、html页面、json数据
        success:function(response){
            console.log("返回: " + response);
            if(response.code === 200) {
                document.getElementById("name-placeholder").textContent = response.data.username;
                document.getElementById("rname-placeholder").textContent = response.data.realname;
                document.getElementById("role-placeholder").textContent = response.data.role;
            }
            else{
                console.log("ERROR")
            }
        },
        error:function(response){
            console.log("出错返回: " + response);
        }
    });
</script>
</body>
</html>